<style>
    .xxpayPopupDiv .layui-form-label {
        width:120px !important;
        margin-left:1%;
    }
    .xxpayPopupDiv .layui-input-inline {
        width: 80% !important;
    }
</style>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">

                <form class="layui-form center">
                    <input type="hidden" name="id" id="id">
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="passageName" id="passageName" placeholder="请输入通道名称" required lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付接口</label>
                        <div class="layui-input-inline" >
                            <select name="ifCode" id="ifCode" lay-filter="ifCodeFilter" disabled="disabled">
                                <option value="">选择支付接口</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">支付类型</label>
                        <div class="layui-input-inline" >
                            <select name="payType" id="payType" lay-filter="payTypeFilter">
                                <option value="">选择支付类型</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">通道状态</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="status" title="开启" value="1" />
                            <input type="radio" name="status" title="关闭" value="0" />
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">是否分账</label>
                        <div class="layui-input-inline" >
                            <input type="radio" name="isDivision" title="是" value="1" />
                            <input type="radio" name="isDivision" title="否" value="0" checked="true"/>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">参数配置方式</label>
                        <div class="layui-input-inline" id="configTypeDiv" >
                            <p style="margin-top: 7px;color: red;">请选择支付接口</p>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">备注信息</label>
                        <div class="layui-input-inline">
                            <input type="text" name="remark" id="remark" placeholder="请输入备注信息" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <button type="button" class="layui-hide xxpayYesBtn" lay-submit="" lay-filter="update">保存</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    
    layui.use(['form','table','util','admin',],function(){
        var form = layui.form
        , $ = layui.$
        , admin = layui.admin
        , layer = layui.layer 
        , element = layui.element
        , view = layui.view
        , table = layui.table;
        
        element.render('breadcrumb', 'breadcrumb'); //渲染导航信息

        var allPayInterfaceType = {};
        
        var id = view.getOpenParams('id');
        admin.req({
            type: 'post',
            url: layui.setter.baseUrl + '/config/pay_passage/get',
            data: {
                id:id
            },
            error: function(err){
                layer.alert(err);
            },
            success: function(res){
                if(res.code == 0){
                    $('#id').val(res.data.id);
                    $('#passageName').val(res.data.passageName);
                    if(res.data.status == 1) {
                        $("input[name='status'][value='1']").attr("checked",true);
                    }else {
                        $("input[name='status'][value='0']").attr("checked",true);
                    }

                    $("input[name='isDivision'][value='"+res.data.isDivision+"']").attr("checked", true);

                    $('#remark').val(res.data.remark);

                    var ifCode = res.data.ifCode;
                    var ifTypeCode = res.data.ifTypeCode;
                    var payType = res.data.payType;
                    var configType = res.data.configType;

                    // 加载支付接口类型
                    admin.req({
                        type: 'post',
                        url: layui.setter.baseUrl + '/config/common/pay_interface_type_all',
                        error: function(err){layer.alert(err);},
                        success: function(resIfType){
                            if(resIfType.code == 0){

                                $.each(resIfType.data, function(){
                                    allPayInterfaceType[this.ifTypeCode] = this;
                                });

                                let _showHtml = "";
                                $.each(allPayInterfaceType[ifTypeCode].supportConfigType.split(","), function(){

                                    if(this == '1'){
                                        _showHtml += `<input type="radio" name="configType" title="内置参数" value="1" />`;
                                    }
                                });

                                $("#configTypeDiv").html(_showHtml);
                                $("input[name='configType'][value='"+configType+"']").attr("checked", true);
                                form.render();

                                // 加载支接口
                                admin.req({
                                    type: 'post',
                                    url: layui.setter.baseUrl + '/config/common/pay_interface_all',
                                    error: function(err){
                                        layer.alert(err);
                                    },
                                    success: function(res){
                                        if(res.code == 0){
                                            var ifTypeList = res.data;
                                            //遍历赋值
                                            for(var i in ifTypeList){
                                                $("#ifCode").append('<option ifTypeCode="' +ifTypeList[i].ifTypeCode+'" value= '+ifTypeList[i].ifCode+'>'+ifTypeList[i].ifName+'</option>');
                                            }
                                            $("#ifCode").find('option[value="'+ifCode+'"]').attr('selected', true);
                                            form.render('select');
                                        }
                                    }
                                });
                            }
                        }
                    });

                    // 加载支付类型
                    admin.req({
                        type: 'post',
                        url: layui.setter.baseUrl + '/config/common/pay_type_all',
                        error: function(err){
                            layer.alert(err);
                        },
                        success: function(res){
                            if(res.code == 0){
                                var payTypeList = res.data;
                                //遍历赋值
                                for(var i in payTypeList){
                                    $("#payType").append('<option value= '+payTypeList[i].payTypeCode+'>'+payTypeList[i].payTypeName+'</option>');
                                }
                                $("#payType").find('option[value="'+payType+'"]').attr('selected', true);
                                form.render('select');
                            }
                        }
                    });

                    form.render();
                }
            }
        });

        form.on('submit(update)', function(data){

            if(!data.field.configType){
                layer.alert("请选择参数配置方式！");
                return false;
            }

            admin.req({
                type: 'post',
                url: layui.setter.baseUrl + '/config/pay_passage/update', //模拟接口,
                data: data.field,
                error: function(err){layer.alert(err.msg,{title:"请求失败"})},
                success: function(res){
                    if(res.code == 0){
                        layer.alert(res.msg, {title: '保存成功'},function(index){
                            layer.closeAll(); //关闭所有弹层
                            layui.table.reload('tableReload'); //调用业务弹层外表格重新加载
                        });
                    }
                }
            });
            return false;
        });

        form.on("select(ifCodeFilter)", function(data){

            let ifTypeCode = $(data.elem).find('option[value="'+data.value+'"]').attr('ifTypeCode');
            let supportConfigType = allPayInterfaceType[ifTypeCode].supportConfigType;

            if(supportConfigType){

                let _html = "";

                $.each(supportConfigType.split(","), function(){

                    if(this == '1'){
                        _html += `<input type="radio" name="configType" title="内置参数" value="1" />`;
                    }
                });

                $("#configTypeDiv").html(_html);

            }else{

                $("#configTypeDiv").html(`<p style="margin-top: 7px;color: red;">请选择支付接口</p>`);
            }

            if($("#configTypeDiv input[name='configType']").length == 1){ //如果仅包含一个则默认选中
                $("#configTypeDiv input[name='configType']").prop('checked', true);
            }

            form.render();

        });

    });
    
</script>
